<template>
  <div class="home wrap">
    <div class="homeBanner">
      <img
        src="https://itdahua.com/img/dahua-home-banner-1.34f56ee8.png"
        alt=""
      />
    </div>
    <div class="homeIntroduce wrap">
      <div class="content">
        <div class="IntroduceBox">
          <div class="imgItem">
            <img
              v-lazy="'https://itdahua.com/img/dahua-home-java.27fbb339.jpg'"
              alt=""
            />
          </div>
          <div class="imgItem">
            <img
              v-lazy="'https://itdahua.com/img/dahua-home-html.65c56d3d.jpg'"
              alt=""
            />
          </div>
          <div class="imgItem">
            <img
              v-lazy="'https://itdahua.com/img/dahua-home-Python.0b317c8f.jpg'"
              alt=""
            />
          </div>
          <div class="imgItem">
            <img
              v-lazy="'https://itdahua.com/img/dahua-home-UI.8c2dde82.jpg'"
              alt=""
            />
          </div>
        </div>
        <div class="homeTrait">
          <div class="policyItem">
            <div class="policyTop">
              <i>
                <img
                  src=""
                  alt=""
                />
              </i>
              <span> “零”基础入学 </span>
            </div>
            <div class="policyBottom">无需任何专业基础知识</div>
            <div class="rightLine"></div>
          </div>
          <div class="policyItem">
            <div class="policyTop">
              <i>
                <img
                  src=""
                  alt=""
                />
              </i>
              <span> 提供助学贷款 </span>
            </div>
            <div class="policyBottom">免手续费贷款业务让您轻松入学</div>
            <div class="rightLine"></div>
          </div>
          <div class="policyItem">
            <div class="policyTop">
              <i>
                <img
                  src=""
                  alt=""
                />
              </i>
              <span> 四大专业技能证书 </span>
            </div>
            <div class="policyBottom">提供专业的技能认证证书，助您驰骋职场</div>
            <div class="rightLine"></div>
          </div>
          <div class="policyItem">
            <div class="policyTop">
              <i>
                <img
                  src=""
                  alt=""
                />
              </i>
              <span> 学信网可查学历 </span>
            </div>
            <div class="policyBottom">提供社会认可的高等学历晋升通道</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 适合人群 -->
    <div class="content">
      <div class="provideTitle">适合什么样的人群学习？</div>
      <div class="provideWrap">
        <div class="provideItem">
          <div class="provideImg">
            <img
              src="https://itdahua.com/img/dahua-home-junior-student.45e03fd1.png"
              alt=""
            />
          </div>
          <p>初中生16岁+</p>
        </div>
        <div class="provideItem">
          <div class="provideImg">
            <img
              v-lazy="
                'https://itdahua.com/img/dahua-home-junior-high-student.2f4b0921.png'
              "
              alt=""
            />
          </div>
          <p>高中生18岁+</p>
        </div>
        <div class="provideItem">
          <div class="provideImg">
            <img
              v-lazy="
                'https://itdahua.com/img/dahua-home-undergraduate.b99bce30.png'
              "
              alt=""
            />
          </div>
          <p>大学生</p>
        </div>
        <div class="provideItem">
          <div class="provideImg">
            <img
              v-lazy="'https://itdahua.com/img/dahua-home-soldier.27f585ed.png'"
              alt=""
            />
          </div>
          <p>退伍军人</p>
        </div>
      </div>
    </div>
    <!-- 学校详情 -->
    <div class="content">
      <div class="schollTitle">了解入学详情</div>
      <div class="schollText">
        <h2>校园占地2000亩，设施齐全</h2>
        <p>在空气清新，环境优美的环境里学习</p>
      </div>
      <div class="schollContent">
        <div class="schollLeft">
          <img
            v-lazy="'https://itdahua.com/img/dahua-home-building.ce421fba.jpg'"
            alt=""
          />
        </div>
        <div class="schollRight">
          <div class="rightImg">
            <img
              v-lazy="
                'https://itdahua.com/img/dahua-home-confucius.d94fddf5.jpg'
              "
              alt=""
            />
          </div>
          <div class="rightImg">
            <img
              v-lazy="'https://itdahua.com/img/dahua-home-study.b319db26.jpg'"
              alt=""
            />
          </div>
          <div class="rightImg">
            <img
              v-lazy="'https://itdahua.com/img/dahua-home-lake.8a250493.jpg'"
              alt=""
            />
          </div>
          <div class="rightImg">
            <img
              v-lazy="'https://itdahua.com/img/dahua-home-scene.3457105f.jpg'"
              alt=""
            />
          </div>
          <div class="rightImg">
            <img
              v-lazy="
                'https://itdahua.com/img/dahua-home-classroom.750a9424.jpg'
              "
              alt=""
            />
          </div>
          <div class="rightImg">
            <img
              v-lazy="
                'https://itdahua.com/img/dahua-home-group-photo.309aaf3f.jpg'
              "
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 精英团队 -->
    <div class="content">
      <div class="schollText">
        <h2>大华教育教师精英团队</h2>
        <p>不跟风，不吹嘘，对学生负责到底</p>
      </div>
      <ul class="teamTop">
        <li
          class="teamTitle"
          :class="{ active: item.id == teamActive }"
          v-for="item in teamTitle"
          :key="item.id"
          @click="changeTitle(item)"
        >
          <div class="teamTxt">{{ item.navs }}</div>
          <div class="teamLine"></div>
        </li>
      </ul>
      <div class="teamContent">
        <swiper class="teacherSwiper" :options="teacherOptions">
          <swiper-slide v-for="item in showTeam" :key="item.id">
            <img v-lazy="baseUrl + item.image" alt="" />
            <div class="teacherIntroduce">
              <div class="teacherTop">
                <div class="teacherInfo">
                  <div class="teacherName">{{ item.name }}</div>
                  <div class="teacherTime">{{ item.year }}年工作经验</div>
                </div>
                <div class="teacherJob">UI高级讲师</div>
              </div>
              <div class="teacherBottom">
                {{ item.introduce }}
              </div>
            </div>
          </swiper-slide>
        </swiper>
        <div class="prevItem">&lt;</div>
        <div class="nextItem">&gt;</div>
      </div>
    </div>
    <!-- 学员作品 -->
    <div class="content">
      <div class="schollText">
        <h2>学员作品</h2>
        <p>紧跟时代潮流，构造高质量作品</p>
      </div>
      <div v-swiper:mySwiper="workOption" class="studentWorks">
        <div class="swiper-wrapper">
          <div class="swiper-slide" :key="index" v-for="(item, index) in 5">
            <img class="slideImg" src="https://itdahua.com/ui-rlwb.png" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- 学员就业喜报 -->
    <div class="content">
      <div class="schollText">
        <h2>学员就业喜报</h2>
        <p>就业率100%，学业事业双丰收</p>
      </div>
    </div>
    <div class="wrap goodNews">
      <div class="goodBanner">
        <img
          src="https://itdahua.com/img/dahua-home-employment-1.bdcec92b.jpg"
          alt=""
        />
      </div>
      <div class="content">
        <div class="polRea">
          <div class="newsWrap" v-swiper="newsOption">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="item in studentsList"
                :key="item.id"
              >
                <img v-lazy="baseUrl + item.work_image" alt="" />
                <p>{{ item.name }} | {{ item.work_title }}</p>
                <p>{{ item.work_company }}</p>
                <p>{{ item.work_salary }}元/月</p>
              </div>
            </div>
            <div class="swiper-scrollbar"></div>
          </div>
          <div class="swiper-button-prev prevNews"></div>
          <div class="swiper-button-next nextNews"></div>
        </div>
      </div>
    </div>
    <!-- 不忘初心 -->
    <div class="content">
      <div class="schollText">
        <h2>10年大华不忘初心，一路前行</h2>
        <p>一代代大华人共同孕育的这片土地，孕育了一批又一批的精英人才</p>
      </div>
      <ul class="beginHeart">
        <li @click="toNews(item)" v-for="item in newsList" :key="item.id">
          <div class="heartLeft">
            <img :src="baseUrl + item.image" alt="" />
          </div>
          <div class="heartRight">
            <div class="heartNews">{{ item.title }}</div>
            <div class="newsTime">
              <i></i>
              {{ item.launch_time }}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 企业合作 -->
    <div class="content">
      <div class="schollText">
        <h2>企业合作</h2>
        <p>大华教育毕业学员服务众多一线企业</p>
      </div>
      <div class="companyContent">
        <img src="https://itdahua.com/upload/default/20210602/a3f26fd5bb4ad5c89573a9bfea7215c5.jpg" alt="">
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      teamTitle: [],
      teamActive: 7,
      baseUrl: "https://itdahua.com/",
      // 教师信息轮播
      teacherOptions: {
        slidesPerView: 4, //一行显示4个
        navigation: {
          nextEl: ".nextItem",
          prevEl: ".prevItem",
        },
        spaceBetween: 10,
      },
      teamList: [],
      // 作品信息轮播
      workOption: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        autoplay: true,
      },
      // 优秀学生列表
      studentsList: [],
      // 优秀学生轮播
      newsOption: {
        slidesPerView: 5,
        slidesPerGroup: 5,
        slidesPerColumn: 2,
        scrollbar: {
          el: ".swiper-scrollbar",
          dragSize: 50,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      // 新闻信息列表
      newsList: [],
    };
  },
  computed: {
    showTeam() {
      let arr = [];
      arr = this.teamList.filter((item) => item.cid == this.teamActive);
      return arr;
    },
  },
  methods: {
    changeTitle(item) {
      this.teamActive = item.id;
    },
    toNews(item){
      this.$store.commit('setNews',item.content)
      this.$router.push('/news')
    }
  },
  async created() {
    // api/curricala/list 课程名
    // api/student/work 优秀学生
    // api/teacher/list 所有老师
    // api/news/list 新闻
    // api/co/list  upload
    // 获取课程名
    let res = await axios.get("api/curricala/list");
    this.teamTitle = res.data.data;
    // 获取所有老师
    let teachers = await axios.get("api/teacher/list");
    this.teamList = teachers.data.data;

    // 获取优秀学生
    let students = await axios.get("api/student/work");
    this.studentsList = students.data.data;
    // 获取信息列表
    let news = await axios.get("api/news/list");
    this.newsList = news.data.data.slice(0,6);
    this.newsList.map(item=>{
      item.launch_time=item.launch_time.split(' ')[0]
      return item
    })
  },
};
</script>
<style lang="scss" scoped>
.home {
  overflow: hidden;
  margin-bottom: 50px;
}
.homeBanner {
  position: relative;
  left: 50%;
  margin-left: -960px;
  width: 1920px;
  overflow: hidden;
}
.homeIntroduce {
  background-color: #f2f2f2;

  .IntroduceBox {
    width: 1100px;
    padding: 10px;
    background-color: #fff;
    position: relative;
    left: 50%;
    margin-left: -560px;
    top: -60px;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    .imgItem {
      width: 262px;
      height: 118px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .homeTrait {
    display: flex;
    margin-top: -60px;
    justify-content: space-between;
    .policyItem {
      margin: 40px 0;
      width: 25%;

      position: relative;
      .policyTop {
        margin: 20px 0;
        display: flex;
        justify-content: center;
        i img {
          width: 26px;
          height: 26px;
        }
        span {
          padding-left: 20px;
          font-size: 24px;
          font-weight: 600;
          color: #666;
        }
      }
      .policyBottom {
        display: flex;
        justify-content: center;
        font-size: 14px;
        color: #999;
      }
      .rightLine {
        position: absolute;
        right: 0;
        top: 50%;
        background-color: #ccc;
        width: 1px;
        height: 100px;
        margin-top: -50px;
        transform: scaleX(0.8);
      }
    }
  }
}
// 适合人群
.provideTitle {
  width: 356px;
  height: 65px;
  background-color: #39f;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  line-height: 65px;
  border-radius: 30px;
  margin: 30px auto;
}
.provideWrap {
  width: 100%;
  display: flex;
  .provideItem {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    .provideImg {
      width: 216px;
      height: 216px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      font-size: 22px;
      color: #3cf;
      font-weight: 600;
      margin-top: 15px;
    }
  }
}
// 学校详情
.schollTitle {
  border: 1px solid #1f8ceb;
  width: 200px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: #1f8ceb;
  font-weight: 500;
  border-radius: 50px;
  margin: 10px auto;
}
.schollText {
  margin: 30px 0;
  margin-right: 15px;

  text-align: center;
  h2 {
    font-size: 34px;
    color: #333;
    padding-top: 20px;
  }
  p {
    padding: 18px 0;
    font-size: 18px;
    color: #999;
  }
}
.schollContent {
  display: flex;
  justify-content: space-around;
  .schollLeft {
    width: 470px;
    height: 392px;
    margin-right: 15px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .schollRight {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: space-between;
    .rightImg {
      width: 230px;
      height: 190px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
// 精英团队
.teamTop {
  width: 1040px;
  display: flex;
  margin: 0 auto;
  padding-bottom: 4px;
  border-bottom: 1px solid #cfcfcf;

  .teamTitle {
    margin-right: 48px;
    height: 26px;
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    text-align: center;
    line-height: 26px;
    .teamLine {
      display: none;
    }
  }
  .active {
    border: 1px solid #0cf;
    border-radius: 15px;
    color: #fff;
    background-color: #0cf;
    .teamLine {
      display: block;
      width: 100%;
      height: 8px;
      background-color: #0cf;
      position: absolute;
      top: 30px;
      left: 0;
      z-index: 5;
    }
    .teamLine:after {
      content: "";
      border: 5px solid #0cf;
      position: absolute;
      bottom: -10px;
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
    }
  }
}
.teamContent {
  width: 100%;
  height: 350px;
  margin: 20px 0;
  position: relative;
  // 教师swiper
  .teacherSwiper {
    width: 1040px;
    margin: 0 auto;
    position: relative;
    .swiper-slide {
      position: relative;
    }
    img {
      width: 250px;
      height: 350px;
    }
    .teacherIntroduce {
      position: absolute;
      width: 250px;
      background-color: rgba(0, 0, 0, 0.3);
      bottom: 0;
      left: 0;
      z-index: 10;
      color: #fff;
      .teacherTop {
        width: 210px;
        margin: 0 20px;
        padding: 10px 0;
        border-bottom: 1px solid #fff;
        .teacherInfo {
          width: 100%;
          height: 30px;
          display: flex;
          line-height: 30px;
          .teacherName {
            font-size: 20px;
            font-weight: 500;
          }
          .teacherTime {
            padding-left: 20px;
            font-size: 12px;
          }
        }
        .teacherJob {
          line-height: 30px;

          height: 30px;
          font-size: 20px;
          font-weight: 500;
        }
      }
      .teacherBottom {
        margin: 10px 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        font-size: 14px;
        color: #fff;
        line-height: 20px;
        text-indent: 28px;
        height: 0;
      }
    }
    ::v-deep .swiper-slide:hover .teacherBottom {
      animation: teachers 0.5s linear;
      animation-fill-mode: forwards;
    }
    @keyframes teachers {
      from {
        height: 0;
      }
      to {
        height: 100px;
      }
    }
  }
  .prevItem,
  .nextItem {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 40px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    top: 50%;
    margin-top: -30px;
  }
  .prevItem {
    left: 0;
  }
  .nextItem {
    right: 0;
  }
}
// 学员作品
.studentWorks ::v-deep {
  position: relative;
  width: 100%;
  height: 666px;
  .swiper-pagination {
    bottom: 0;
    .swiper-pagination-bullet {
      width: 28px;
      height: 16px;
      border-radius: 16px;
      opacity: 1;
      background-color: #ccc;
    }
    .swiper-pagination-bullet-active {
      width: 68px;
      height: 16px;
      border-radius: 16px;
      opacity: 1;
      background-color: #f90;
    }
    .swiper-slide {
      width: 100%;
      height: 100%;
    }
  }
}
// 学员就业喜报
.goodNews {
  overflow: hidden;
  position: relative;
  height: 590px;
  .goodBanner {
    position: absolute;
    left: 50%;
    margin-left: -960px;
    top: 0;
  }
  .newsWrap {
    position: absolute;
    z-index: 5;
    width: 960px;
    height: 400px;
    left: 50%;
    top: 30%;
    margin-left: -480px;
    ::v-deep .swiper-slide {
      display: flex;
      height: 180px;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      padding: 10px;
      img {
        width: 132px;
        height: 90px;
      }
      p {
        margin-top: 9px;
        color: #ffff9a;
      }
    }
  }
  .polRea {
    position: relative;
    width: 100%;
    height: 540px;
  }
  .prevNews,
  .nextNews {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 40px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    top: 50%;
    margin-top: -30px;
  }
  .prevNews {
    left: 0;
  }
  .nextNews {
    right: 0;
  }
}
// 不忘初心
.beginHeart {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 400px;
    padding: 16px 0;
    box-sizing: border-box;
    display: flex;
    .heartLeft {
      width: 103px;
      height: 103px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .heartRight {
      flex: 1;
      height: 83px;
      padding: 10px;
      .heartNews {
        width: 100%;
        line-height: 20px;
        padding-top: 6px;
        padding-bottom: 14px;
        color: #333;
        font-weight: 700;
        font-size: 16px;
      }
      .newsTime {
        font-size: 12px;
        color: #ccc;
        height: 17px;
        line-height: 17px;
        display: flex;
        align-items: center;
        i {
          width: 16px;
          height: 16px;
          background-image: url("");
          margin-right: 5px;
        }
      }
    }
  }
}
// 企业合作
.companyContent{
  width: 1200px;
  height: 581px;
  img{
    width: 100%;
    height: 100%;
  }
}
</style>